<template>
  <div class="tableList">
    <el-table
      :cell-style="cellStyle"
      :data="tableData"
      stripe
      border :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}">
      <el-table-column  align='center' prop="itemName" label="收费项目"  width="100" >
      </el-table-column>
      <el-table-column
        prop="itemPrice"
        align='right'
        label="单价"
        width="100">
      </el-table-column>
      <el-table-column
        prop="itemNumber"
        align='right'
        label="数量"
        width="80">
      </el-table-column>
      <el-table-column
        prop="itemUnit"
        align='center'
        label="单位"
        width="80">
      </el-table-column>
      <el-table-column
        prop="itemCharge"
        align='right'
        label="总金额"
        width="100">
      </el-table-column>
      <el-table-column
        prop="discountCharge"
        align='right'
        label="优惠"
        width="100">
      </el-table-column>
      <el-table-column
        prop="benefitCharge"
        align='right'
        label="减免"
        width="100">
      </el-table-column>
      <el-table-column
        prop="asSettled"
        align='center'
        label="结算状态"
        width="120">
        <template slot-scope="{row,$index}">
          <div v-if="row.itemName">
            <span v-if="row.asUnsettled==1" style="color: #f00;">不可结算</span>
            <span v-else-if="row.asSettled==0">未结算</span>
            <span v-else-if="row.asSettled==1">已结算</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="itemName1" label="收费项目" width="100">
      </el-table-column>
      <el-table-column
        prop="itemPrice1"
        align='right'
        label="单价"
        width="100">
      </el-table-column>
      <el-table-column
        prop="itemNumber1"
        align='right'
        label="数量"
        width="80">
      </el-table-column>
      <el-table-column
        prop="itemUnit1"
        align='center'
        label="单位"
        width="80">
      </el-table-column>
      <el-table-column
        prop="itemCharge1"
        align='right'
        label="总金额"
        width="100">
      </el-table-column>
      <el-table-column
        prop="discountCharge1"
        align='right'
        label="优惠"
        width="100">
      </el-table-column>
      <el-table-column
        prop="benefitCharge1"
        align='right'
        label="减免"
        width="100">
      </el-table-column>
      <el-table-column
        prop="asSettled1"
        align='center'
        label="结算状态"
        width="120">
        <template slot-scope="{row,$index}">
          <div v-if="row.itemName1">
            <span v-if="row.asUnsettled1==1" style="color: #f00;">不可结算</span>
            <span v-else-if="row.asSettled1==0">未结算</span>
            <span v-else-if="row.asSettled1==1">已结算</span>
          </div>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>
<script>
    export default {
      name: "tableList",
      props:{
          tableData:{
            type:Array,
            required:true
          },
        removeFlag:{
            type:Boolean,
          default:false
        },
        btnlimit:{
            type:Boolean,
          default:true
        }
      },
      methods:{
        // 单元格的 style 的回调方法
        cellStyle({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0 || columnIndex === 8) {
            return `background-color:rgb(250,250,250);`;
          } else {
            return ''
          }
        },
      }

    }
</script>

<style scoped>

</style>
